import type { Metadata } from 'next';
import { Inter, JetBrains_Mono } from 'next/font/google';
import { ThemeProvider } from '@/components/theme-provider';
import {
  SkipToContent,
  KeyboardNavigationIndicator,
} from '@/components/accessibility/skip-to-content';
import {
  AnalyticsProvider,
  DEFAULT_ANALYTICS_CONFIG,
} from '@/components/analytics/analytics-provider';
import { PerformanceMonitor } from '@/components/analytics/web-vitals';
import {
  ScrollProgress,
  CircularScrollProgress,
} from '@/components/ui/scroll-progress';
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
import { SEO } from '@/constants';
import { Toaster } from 'sonner';
import './globals.css';

/**
 * 字体配置
 */
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

/**
 * 网站元数据配置
 */
export const metadata: Metadata = {
  title: {
    default: SEO.SITE_NAME,
    template: `%s | ${SEO.SITE_NAME}`,
  },
  description: SEO.SITE_DESCRIPTION,
  keywords: [
    'CActor',
    'Actor模型',
    '高性能',
    '金融科技',
    '分布式系统',
    '仓颉语言',
    '高频交易',
    '实时支付',
    '风控系统',
  ],
  authors: [{ name: 'CActor Team' }],
  creator: 'CActor Framework',
  openGraph: {
    type: 'website',
    locale: 'zh_CN',
    url: SEO.SITE_URL,
    title: SEO.SITE_NAME,
    description: SEO.SITE_DESCRIPTION,
    siteName: SEO.SITE_NAME,
    images: [
      {
        url: `${SEO.SITE_URL}/og-image.png`,
        width: 1200,
        height: 630,
        alt: SEO.SITE_NAME,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: SEO.SITE_NAME,
    description: SEO.SITE_DESCRIPTION,
    site: SEO.TWITTER_HANDLE,
    creator: SEO.TWITTER_HANDLE,
    images: [`${SEO.SITE_URL}/og-image.png`],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  manifest: '/manifest.json',
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png',
  },
};

/**
 * 根布局组件
 */
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <head>
        {/* 预加载关键资源 */}
        <link
          rel="preload"
          href="/fonts/inter-var.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        {/* DNS预解析 */}
        <link rel="dns-prefetch" href="//fonts.googleapis.com" />
        <link rel="dns-prefetch" href="//www.google-analytics.com" />

        {/* 性能优化 */}
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover"
        />
        <meta name="theme-color" content="#2563eb" />
        <meta name="color-scheme" content="light dark" />

        {/* 安全头 */}
        <meta httpEquiv="X-Content-Type-Options" content="nosniff" />
        <meta httpEquiv="X-Frame-Options" content="DENY" />
        <meta httpEquiv="X-XSS-Protection" content="1; mode=block" />
      </head>
      <body
        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
      >
        <AnalyticsProvider
          config={{
            ...DEFAULT_ANALYTICS_CONFIG,
            googleAnalyticsId: process.env.NEXT_PUBLIC_GA_ID,
            baiduAnalyticsId: process.env.NEXT_PUBLIC_BAIDU_ID,
            hotjarId: process.env.NEXT_PUBLIC_HOTJAR_ID,
            clarityId: process.env.NEXT_PUBLIC_CLARITY_ID,
          }}
        >
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            <div className="relative flex min-h-screen flex-col">
              <SkipToContent />
              <KeyboardNavigationIndicator />
              <PerformanceMonitor />
              <ScrollProgress />
              <CircularScrollProgress />
              <Header />
              <main id="main-content" tabIndex={-1} className="flex-1">
                {children}
              </main>
              <Footer />
            </div>
            <Toaster
              position="bottom-right"
              toastOptions={{
                style: {
                  background: 'hsl(var(--background))',
                  color: 'hsl(var(--foreground))',
                  border: '1px solid hsl(var(--border))',
                },
              }}
            />
          </ThemeProvider>
        </AnalyticsProvider>
      </body>
    </html>
  );
}
